<template></template><template>
  <div>
    <div class="table_box_hy hybm">
      <div class="hybm_box">
        <div class="hybm_title">{{ this.$route.meta.title }}</div>
      </div>
      <div class="table_item_hy">
        <el-table :data="tableData" stripe fit>
          <el-table-column prop="year" label="年限" width="300">
          </el-table-column>
          <el-table-column prop="check_status" label="缴费状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">未缴纳</span>
              <span v-if="scope.row.status == 1">缴费审核中</span>
              <span v-if="scope.row.status == 2">缴费成功</span>
              <span v-if="scope.row.status == 3">缴费驳回</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination_hy">
        <el-pagination
          hide-on-single-page
          background
          :pager-count="5"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page="page"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
    
    <script>
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      page: 1,
    };
  },
  mounted() {
    this.getinfo();
  },
  methods: {
    /**
     * 分页
     * @param {页码} page
     */
    handleCurrentChange(page) {
      // 当分页发生变化时的处理函数
      this.page = page;
      this.getinfo();
    },
    /**
     * 获取列表
     */
    getinfo() {
      let that = this;
      let data = {
        page: that.page,
      };
      that.$http.post("user/fee_list", data).then((res) => {
        if (res.code === 1) {
          that.total = res.data.total;
          that.tableData = res.data.data;
        } else {
          that.total = 0;
          that.tableData = [];
        }
      });
    },
    /**
     *  查看详情
     * @param {插槽数据} e
     */
    handleClick(e) {
      let path = "";
      if (e.is_mechanism == 1) {
        path = "/grjnhf_xq1";
      } else {
        if (e.status == 0) {
          path = "/grjnhf_xq1";
        }
        if(e.status == 3 || e.status == 2 || e.status == 1){
          path = "/grjnhf_xq2";
        }
      }

      this.$router.push({ path: path, query: { id: e.id } });
    },
  },
};
</script>
    <style scoped>
.hybm {
  border: 1px solid #ddd;
  background: #ffffff;
  border-radius: 0.125rem;
  box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.15);
  padding-bottom: 0.375rem;
}
.hybm_box {
  height: 0.7625rem;
  display: flex;
  align-items: center;
  border-bottom: 0.0125rem solid #1954a4;
  padding-left: 0.25rem;
  box-sizing: border-box;
}
.hybm_title {
  border-left: 0.05rem solid #1954a4;
  padding-left: 0.1375rem;
  box-sizing: border-box;
  font-size: 0.25rem;
  font-weight: 400;
  color: #1954a4;
}
.table_item_hy {
  width: 14rem;
  margin: 0.375rem auto 0;
}
</style>